<template>
  <div class="article-item" @click="onArticleClick">
    <header>{{ articleInfo.author }} | {{ articleInfo.tags.split(',').join(' · ') }} |
      {{ parseTime.parseDateTime(articleInfo.publishTime) }}
    </header>
    <main>
      <div class="text">
        <h2 class="title" :class="{'wid-row':!articleInfo.poster}">{{ articleInfo.title }}</h2>
        <p class="content" :class="{'wid-row':!articleInfo.poster}">{{ articleInfo.description }}</p>
        <ul class="icon-row">
          <li>
            <icon class="icon" name="scan"/>
            <p>{{ articleInfo.scanNum }}</p>
          </li>
          <li @click.stop="onIconClick(1)">
            <icon name="like-o" class="icon"
                  :class="{like:articleInfo.isLike}"/>
            <p :class="{like:articleInfo.isLike}">{{ articleInfo.likeNum }}</p>
          </li>
          <li @click.stop="onIconClick(2)">
            <svg t="1635747224526" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="3847" width="200" height="200">
              <path
                  d="M155.974656 818.441216l111.712256-36.077568 21.907456 12.691456C354.75456 832.80384 431.485952 853.332992 512 853.332992c221.49632 0 398.222336-154.63424 398.222336-341.332992 0-186.697728-176.726016-341.332992-398.222336-341.332992S113.777664 325.301248 113.777664 512c0 65.89952 21.848064 129.069056 62.642176 183.640064l19.295232 25.810944-39.74144 96.990208zM512 910.222336c-92.73344 0-178.988032-24.2688-250.923008-65.942528l-145.903616 47.11936a28.444672 28.444672 0 0 1-19.526656-0.74752c-14.53568-5.955584-21.491712-22.56896-15.536128-37.10464l50.74432-123.845632C84.082688 667.132928 56.889344 592.345088 56.889344 512c0-219.931648 203.759616-398.222336 455.110656-398.222336S967.110656 292.068352 967.110656 512c0 219.931648-203.759616 398.222336-455.110656 398.222336z"
                  p-id="3848"></path>
              <path
                  d="M512 512m-56.889344 0a56.889344 56.889344 0 1 0 113.778688 0 56.889344 56.889344 0 1 0-113.778688 0Z"
                  p-id="3849"></path>
              <path
                  d="M284.444672 512m-56.889344 0a56.889344 56.889344 0 1 0 113.778688 0 56.889344 56.889344 0 1 0-113.778688 0Z"
                  p-id="3850"></path>
              <path
                  d="M739.555328 512m-56.889344 0a56.889344 56.889344 0 1 0 113.778688 0 56.889344 56.889344 0 1 0-113.778688 0Z"
                  p-id="3851"></path>
            </svg>
            <p>{{ articleInfo.commentNum }}</p>
          </li>
        </ul>
      </div>
      <img v-if="articleInfo.poster" class="poster" :src="articleInfo.poster" alt="">
    </main>
  </div>
</template>

<script>
import article from "@/api/article";
import Icon from "@/components/icon";

export default {
  name: "article-item",
  components: {Icon},
  props: {
    articleInfo: {
      type: Object,
      default() {
        return {
          articleId: 'article0127',
          title: '标题',
          description: '简要描述',
          scanNum: 1166,
          likeNum: 20,
          commentNum: 7,
          poster: ''
        }
      }
    }
  },
  methods: {
    onArticleClick() {
      window.open(this.origin + '/#/article-detail?articleId=' + this.articleInfo.articleId)
      article.scan(this.articleInfo.articleId)
          .then((res) => {
            if (res.code === 200) {
              this.articleInfo.scanNum = res.data.scanNum
              this.articleInfo.likeNum = res.data.likeNum
              this.articleInfo.commentNum = res.data.commentNum
            } else {
              this.$error(res.msg)
            }
          })
          .catch((err) => {
            this.$error(err)
          })
    },
    onIconClick(type) {
      if (type === 1) {
        if(this.userInfo.userId){
          const params = {
            articleId: this.articleInfo.articleId,
            userId: this.userInfo.userId,
          }
          article.like(params)
              .then((res) => {
                if (res.code === 200) {
                  console.log(res.msg)
                  this.articleInfo.isLike = (++this.articleInfo.isLike)%2
                  this.articleInfo.likeNum = res.data.likeNum
                } else {
                  this.$error(res.msg)
                }
              })
              .catch((err) => {
                this.$error(err)
              })
        }else{
          this.$warning('请先登录')
        }
      } else if (type === 2) {
        console.log('评论')
      } else {
        console.log('type=' + type)
      }
    }
  }
}
</script>

<style lang="less" scoped>

.article-item {
  padding: 20px;
  border-bottom: 1px solid #eeeeee;
  height: 100px;
  cursor: pointer;

  &:hover {
    background-color: #fafafa;
  }

  header {
    color: #86909c;
    font-size: 13px;
  }

  main {
    display: flex;
    justify-content: space-between;

    .text {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-top: 10px;
      height: 80px;

      .title {
        font-size: 16px;
        width: 620px;
        .text-ellipse();
      }

      .content {
        color: #86909c;
        width: 620px;
        font-size: 13px;
        .text-ellipse();
      }

      .icon-row {
        .flex-center();
        font-size: 13px;
        color: #4e5969;

        li {
          display: flex;

          &:hover {
            color: #4a97fa;

            .icon {
              fill: #4a97fa;
            }
          }
        }

        p {
          margin-right: 20px;
        }
      }
    }

    .poster {
      flex-shrink: 0;
      .size(120px, 80px);
    }
  }
}

.icon {
  .size(16px);
  margin-right: 4px;
  fill: #4e5969;
}

.wid-row {
  width: 760px !important;
}

.like {
  color: #4a97fa;
  fill: #4a97fa;
}
</style>